<template>
  <div class="container">
    <toolbar :title="$route.meta.title" :back="true"></toolbar>
    <div class="t-container">
      <scroll :data="data" :loading="true" @loadMore="loadMore">
        <ul>
          <li class="_m-2 p-2_ " v-for="item in data" :key="item.id">
            <h2 class="d-flex justify-content-between border-bottom">
              <p> 
                {{item.chapter.chapterName}}
              </p>
              <p>￥ {{item.payPrice}}</p>
            </h2>
            <dl>
              <dd>
                小说名称: {{item.books.booksName}}
              </dd>
              <dd>
                支付时间: {{item.createTime | date}}
              </dd>
            </dl>
          </li>
        </ul>
      </scroll>
    </div>
  </div>  
</template>

<script>
import Toolbar from '../../../components/Toolbar'
import Scroll from 'components/Scroll'

import {getPayHistoryList} from 'api/PayHistoryApi'

export default {
  name: 'ConsumeHistory',
  components: {
    Toolbar,
    Scroll
  },
  data () {
    return {
      data: [],
      totalPage: 1,
      search: {
        currentIndex: 1
      }
    }
  },
  methods: {
    loadMore (currentIndex, $scroll) {
      this.search.currentIndex = currentIndex;
      if(this.search.currentIndex <= this.totalPage) {
       this.getData()
      } else  $scroll.forceUpdate();
    } ,
    getData () {
      getPayHistoryList(this.search)
        .then(res => {
          if(res.meta.success) {
            this.data = this.data.concat(res.data.datas);
            this.totalPage = res.data.pagination.totalPage;
          }
        })
    }
  },
  created () {
    this.getData()
  }
}
</script>

<style lang="stylus" scoped>

li {
  background #FFF
  h2 {
    height 45px
    line-height 45px

    .icon-huiyuan1 {
      color #F00
    }
    .icon-gold {
      color #f5d72a
    }
  }

  dl {
    padding 2vw 0
    dd {
      font-size 14px
      margin 3vw 0
      color #666
    }
  }
}
</style>
